<template>
    <div>
        <div>{{ $route.meta.title }}</div>
        <!-- v-text,v-html,{{ }} -->
        <div>{{ user }}</div>
        <!-- <div v-text="user">{{ user }}</div> -->
        <!-- <div v-html="user">{{ user }}</div> -->
        <div v-html="user" v-text='str'></div>
        <div v-text='str' v-html="user"></div>
        <!-- v-on事件绑定 -->
        <button @click="changestr()">change1</button><br>
        <button v-on:click="changestr()">change2</button>
        <!-- v-once单次渲染，数据变化dom不变，相当于静态dom -->
        <div v-once>{{ str }}</div>
        <!-- v-model -->
        <input type="text" v-model="num">
        <div>{{ num }}</div>
        <!-- v-if,v-show -->
        <button @click="changeflag($event)">changeflag</button>
        <div v-if="flag">v-if</div>
        <div v-show="flag">v-show</div>
        <!-- v-for -->
        <ul>
            <li v-for="(item, index) in arr" :key="index">{{ item }}</li>
        </ul>
        <button v-debounce="['click', logdebounce, 500]">v-debounce</button><br>
        <button v-throttle="['click', logthrottle, 2000]">v-throttle</button><br>
        <!-- v-bind -->
        <a v-bind:href="url">百度1</a><br>
        <a :href="url">百度2</a>
    </div>
</template>
<script>
export default {
    data() {
        return {
            url: 'https://www.baidu.com',
            flag: true,
            num: 1,
            str: 'hello',
            user: {
                name: 'zhangsan',
                age: 18
            },
            arr: [1, 2, 3]
        }
    },
    methods: {
        changestr() {
            this.str = '你好'
        },
        changeflag(ev) {
            console.log(ev);
            this.flag = !this.flag
        },
        logdebounce() {
            console.log('debounce');
        },
        logthrottle() {
            console.log('throttle');
        }
    },
    directives: {
        'throttle': {
            inserted(el, binding) {
                let timer = null;
                el.addEventListener('click', () => {
                    if (!timer) {
                        timer = setTimeout(() => {
                            binding.value[1]();
                            timer = null;
                        }, binding.value[2])
                    }
                })
            }
        }
    }
}
</script>
<style></style>